<template>
    <div class="app-container">
        <section>
            <div class="content" v-loading="loading">
                <div class="depart">
                    <div class="title" >
                        <span>{{ title || "菜单管理" }}</span>
                        <!-- <el-button
                            :loading="isBtn"
                            size="small "
                            type="primary"
                            style="margin-left: auto"
                            @click="addMune"
                            >添加</el-button
                        >
                        <el-button
                            plain
                            size="small "
                            @click="
                                $router.push(
                                    '/basicData/root/rootManagement?activeName=second'
                                )
                            "
                            >取消</el-button
                        > -->
                    </div>
                    <div class="depart-li">
                        <div class="treName">
                            <span>模块名称/权限名称</span>
                            <span class="p150">接口路径</span>
                            <span class="p150">页面路径</span>
                            <span class="p80">排序</span>
                            <span class="p80">是否启用</span>
                            <span class="p80">是否隐藏</span>
                            <span class="p120">操作</span>
                        </div>
                        <el-tree
                            :data="menuList"
                            show-checkbox
                            node-key="id"
                            ref="tree"
                            :expand-on-click-node="false"
                            highlight-current
                            default-expand-all
                            :default-checked-keys="menu_id"
                            :props="defaultProps"
                            @check="handleCheckChange"
                        >
                            <span
                                class="custom-tree-node"
                                slot-scope="{ node, data }"
                                style="
                                    width: 100%;
                                    display: flex;
                                    align-items: center;
                                "
                                :class="{ hideCss: node.data.hidden == 1 }"
                                @click.stop="getInfo(node)"
                            >
                                <!-- <span
                                    style="width: 200px"
                                    v-if="!node.select"
                                    >{{ node.label }}</span
                                > -->
                                <el-input
                                    v-model="node.data.title"
                                    placeholder="模块名称或权限名称"
                                    size="mini"
                                    @blur="save(node.data)"
                                ></el-input>
                                <el-input
                                    style="
                                        max-width: 300px;
                                        margin-left: auto;
                                        margin-right: 20px;
                                    "
                                    v-model="node.data.name"
                                    placeholder="接口路径"
                                    size="mini"
                                    @blur="save(node.data)"
                                ></el-input>
                                <el-input
                                    style="max-width: 300px; margin-right: 20px"
                                    v-model="node.data.path"
                                    placeholder="前端路径"
                                    size="mini"
                                    @blur="save(node.data)"
                                ></el-input>
                                <el-input
                                    style="width: 80rpx"
                                    v-model="node.data.sort"
                                    placeholder="排序"
                                    size="mini"
                                    @blur="save(node.data)"
                                ></el-input>
                                <el-checkbox
                                    style="
                                        width: 80px;
                                        text-align: center;
                                        margin-right: 0;
                                    "
                                    :true-label="1"
                                    :false-label="0"
                                    v-model="node.data.status"
                                    @change="save(node.data)"
                                ></el-checkbox>
                                <el-checkbox
                                    style="width: 80px; text-align: center"
                                    :true-label="1"
                                    :false-label="0"
                                    v-model="node.data.hidden"
                                    @change="save(node.data)"
                                ></el-checkbox>

                                <span style="width: 120px; text-align: center">
                                    <el-button
                                        type="text"
                                        size="mini"
                                        @click="add(data)"
                                        v-show="data.level < 4"
                                    >
                                        添加
                                    </el-button>
                                      <!-- append(data) -->
                                    <el-button
                                        type="text"
                                        size="mini"
                                        @click.stop="remove(data)"
                                    >
                                        删除
                                    </el-button>
                                </span>
                            </span>
                        </el-tree>
                        <el-dialog
                            title="添加菜单列表/权限"
                            :visible.sync="dialogVisible"
                            width="50%"
                            :before-close="handleClose"
                        >
                            <el-form ref="form" :model="dt" >
                                <el-form-item label="模块/权限名称:">
                                    <el-input
                                        v-model="dt.title"
                                        placeholder=""
                                    ></el-input>
                                </el-form-item>
                                <el-form-item label="接口路径:">
                                    <el-input
                                        v-model="dt.name"
                                        placeholder=""
                                    ></el-input>
                                </el-form-item>
                                <el-form-item label="页面路径:">
                                    <el-input
                                        v-model="dt.path"
                                        placeholder=""
                                    ></el-input>
                                </el-form-item>
                                <el-form-item label="排序:">
                                    <el-input
                                        v-model="dt.sort"
                                        placeholder=""
                                    ></el-input>
                                </el-form-item>
                                <el-form-item label="是否启用:">
                                    <el-checkbox
                                        :true-label="1"
                                        :false-label="0"
                                        v-model="dt.status"
                                    ></el-checkbox>
                                </el-form-item>
                                <el-form-item label="是否隐藏:">
                                    <el-checkbox
                                        :true-label="1"
                                        :false-label="0"
                                        v-model="dt.hidden"
                                    ></el-checkbox>
                                </el-form-item>
                            </el-form>
                            <span slot="footer" class="dialog-footer">
                                <el-button @click="dialogVisible = false"
                                    >取 消</el-button
                                >
                                <el-button
                                    type="primary"
                                    @click="addMune"
                                    >确 定</el-button
                                >
                            </span>
                        </el-dialog>
                    </div>
                </div>
            </div>
        </section>
    </div>
</template>

<script>
import { logger } from "runjs/lib/common";
import { collectCoverageFrom } from "../../../jest.config";
export default {
    data() {
        return {
            id: 0, //角色id
            title: "", //标题
            loading: false, //页面加载
            isBtn: false, //按钮加载
            menu_id: [], //权限id组
            menuList: [], //权限列表
            defaultProps: {
                //
                children: "child",
                label: "title",
            },
            dialogVisible: false, //修改编辑的弹框
            delStatus: false, //防止重复操作
            dt: {
                id: "",
                title: "",
                name:'',
                pid: 0,
                level: 1,
                path: "",
                sort: 0,
                status: 1,
                hidden: 0,
            },
            dt2: {
                id: "",
                title: "",
                name:'',
                pid: 0,
                level: 1,
                path: "",
                sort: 0,
                status: 1,
                hidden: 0,
            },
            addInfo:{},
        };
    },
    created() {
        // let { id, name } = this.$route.query;
        // this.title = name;
        // if (id) {
        //     this.id = id;
        //     this.getRolePermissions();
        // }
    },
    mounted() {
        this.getMenuList();
    },
    methods: {
        handleClose() {
            this.dialogVisible = false;
        },
        //添加的对象信息
        add(data) {
            this.dt = JSON.parse(JSON.stringify(this.dt2))
            console.log(this.dt);
            this.addInfo = data;
            this.dialogVisible = true;
            console.log(data);
        },
        getInfo(node) {
            console.log(node);
            if (node.select) {
                node.select = !node.select;
            } else {
                node.select = true;
            }
            this.$forceUpdate();
        },
        async addMune() {
            this.loading = true
            let dt = {
                id: "",
                name:this.dt.name,
                title: this.dt.title,
                pid: this.addInfo.id,
                level: Number(this.addInfo.level) + 1,
                path:  this.dt.path,
                sort:  this.dt.sort,
                status:  this.dt.status,
                hidden: this.dt.hidden,
            };
            let res = await this.$Http.saveMenu(dt);
            if (res.code) {
                dt.id = res.data.id;
                this.getMenuList();
                this.dialogVisible = false
                this.dt = this.dt2
                this.$forceUpdate();
            }
            this.loading = false
        },
        //失去焦点保存
        async save(data) {
            let dt = {
                id: data.id,
                name: data.name,
                path: data.path,
                title: data.title,
                pid: data.pid,
                level: data.level,
                sort: data.sort,
                status: data.status,
                hidden: data.hidden,
            };
            let res = await this.$Http.saveMenu(dt);
            if (res.code) {
                console.log(res);
                this.$message({
                    message: "保存成功",
                    type: "success",
                });
            }
        },
        //添加
        async append(data) {
            if (this.delStatus) return;
            this.delStatus = true;
            let newChild = {
                id: "",
                title: "",
                pid: data.id,
                level: data.level + 1,
                label: "",
                path: "",
                sort: null,
                status: 1,
                // child: [],
            };
            if (!data.child) {
                this.$set(data, "child", []);
            }
            let res = await this.$Http.saveMenu(newChild);
            if (res.code) {
                newChild.id = res.data.id;
                data.child.push(newChild);
                this.$forceUpdate();
            }
            this.delStatus = false;
        },
        //删除
        async remove(data) {
            if (this.delStatus) return;
            this.delStatus = true;
            let res = await this.$Http.delMenu({
                id: data.id,
            });
            if (res.code) {
                this.$message({
                    message: "删除成功",
                    type: "success",
                });
                this.getMenuList();
            }
            this.delStatus = false;
        },
        //回去菜单列表
        async getMenuList() {
            this.loading = true;
            let res = await this.$Http.getMenuList();
            if (res.code) this.menuList = res.data;
            this.loading = false;
        },
        handleCheckChange(data, checked) {
            this.menu_id = checked.checkedKeys;
        },
        dedupe(array) {
            return Array.from(new Set(array));
        },
        removeWithoutCopy(arr, item) {
            for (var i = 0; i < arr.length; i++) {
                if (arr[i] == item) {
                    //splice方法会改变数组长度，当减掉一个元素后，后面的元素都会前移，因此需要相应减少i的值
                    arr.splice(i, 1);
                    i--;
                }
            }
            return arr;
        },
    },
};
</script>

<style lang="scss" scoped>
::v-deep {
    .el-tree-node__content {
        height: 40px;
    }
    .hideCss {
        .el-input__inner {
            background-color: rgba($color: #000000, $alpha: 0.1);
        }
    }
    .el-form-item {
        display: flex;
        align-items: center;
        .el-form-item__label {
            width: 120px;
        }
        .el-form-item__content {
            margin-left: 10px;
            .el-input {
                width: 100%;
            }
        }
    }
}
.app-container {
    ::v-deep .el-form-item__label {
        float: initial;
    }
    // .kong {
    //     height: 40px;
    // }
    section {
        background: #eee;
        padding: 30px;
        min-height: calc(100vh - 90px);
        .content {
            background: #fff;
            border-radius: 8px;
            padding: 30px 45px;
            .depart {
                .title {
                    display: flex;
                    align-items: center;
                    height: 74px;
                    font-size: 18px;
                    line-height: 74px;
                    font-size: 20px;
                    font-weight: 600;
                    color: #383b40;
                    border-bottom: 1px solid #e8ecef;
                }
                .depart-li {
                    padding: 20px 0;
                    border-bottom: 1px solid #e8ecef;
                    &:last-child {
                        border-bottom: none;
                    }

                    .treName {
                        display: flex;
                        align-items: center;
                        padding-bottom: 20px;
                        font-size: 14px;
                        font-weight: 600;
                        color: #383b40;
                        .p80 {
                            width: 80px;
                        }
                        .p120 {
                            min-width: 120px;
                        }
                        .p150 {
                            min-width: 150px;
                            margin: 0 15px;
                        }
                        > span {
                            text-align: center;
                        }
                        > span:nth-child(2) {
                            margin-left: auto;
                        }
                    }
                }
            }
        }
    }
}

.el-input {
    width: 150px;
}
.el-input:nth-child(2) {
    width: auto;
    margin-left: auto;
}

.el-input:nth-child(4) {
    width: 80px;
}
</style>